<template> 
	<div class="app-container">
		<el-card class="operate-container" shadow="never">
			<i class="el-icon-tickets"></i>
			<span>数据列表</span>
		</el-card>
		<div class="table-container">
			<!-- @selection-change="handleSelectionChange"  -->
			<el-table ref="centerH5Table" :data="list" style="width: 100%;" v-loading="listLoading"
			 border>
				<!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
				<el-table-column label="编号" width="120" align="center">
					<template slot-scope="scope">{{scope.row.id}}</template>
				</el-table-column>
				<el-table-column label="图片" width="center" align="center">
					<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
				</el-table-column>
				<!-- <el-table-column label="排序" width="120" align="center">
					<template slot-scope="scope">{{scope.row.sort}}</template>
				</el-table-column> -->
				<el-table-column label="操作" width="240" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
			 :page-size="listQuery.pageSize" :page-sizes="[10,15,50]" :current-page.sync="listQuery.pageNum" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		fetchList,
		updateStatus,
	} from '@/api/centers/centerH5';
	import {
		formatDate
	} from '@/utils/date';
	const defaultListQuery = {
		pageNum: 1,
		pageSize: 10,
		id: null,
		pic: null,
		sort: null,
	};
	export default {
		name: 'centerH5List',
		data() {
			return {
				listQuery: Object.assign({}, defaultListQuery),
				list: null,
				total: null,
				listLoading: false,
				multipleSelection: [],
			}
		},
		created() {
			this.getList();
		},
		filters: {
			formatTime(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
		},
		methods: {
			handleResetSearch() {
				this.listQuery = Object.assign({}, defaultListQuery);
			},
			handleSearchList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			handleDelete(index, row) {
				this.deleteHomeAdvertise(row.id);
			},
			handleUpdate(index, row) {
				this.$router.push({
					path: '/marking/updateCenterH5',
					query: {
						id: row.id
					}
				})
			},
			getList() {
				this.listLoading = true;
				fetchList().then(response => {
					this.listLoading = false;
					this.list = response.data;
					this.total = response.data.total;
				})
			},
		}
	}
</script>
<style scoped>
	.input-width {
		width: 203px;
	}
</style>
